<template>
	<view>
		<view class="header">
			<view class="loginHeader">
				<image src="https://z3.ax1x.com/2021/04/17/c4kvIU.png" mode="" style="width: 168rpx; height: 168rpx;">
				</image>
			</view>
		</view>
		<view class="inputBox">
			<view class="userBox">
				<view class="userInput">
					<image src="https://z3.ax1x.com/2021/04/17/c4Zrwt.png" mode=""
						style="width: 30rpx; height: 36rpx; margin-right: 20rpx;"></image>
					<input type="text" v-model="userData.username" placeholder="请输入手机号" @blur="userInput" />

				</view>
				<view class="incorrect" v-show="phoneIncorrect">
					<image src="../../static/icon/cuo.png" mode=""
						style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"></image>
					<text>手机号码不确</text>
				</view>
				<view class="userInput">
					<image src="https://z3.ax1x.com/2021/04/17/c4mrPf.png" mode=""
						style="width: 30rpx; height: 36rpx; margin-right: 20rpx;"></image>
					<input type="text" value="" placeholder="请输入密码" v-model="userData.password" />
					<image class="lookPassword" src="https://z3.ax1x.com/2021/04/17/c4rd1O.png" mode=""
						style="width: 42rpx; height: 28rpx;"></image>
				</view>
				<view class="userInput">
					<image src="https://z3.ax1x.com/2021/04/17/c4mrPf.png" mode=""
						style="width: 30rpx; height: 36rpx; margin-right: 20rpx;"></image>
					<input type="text" placeholder="确认密码" v-model="confirmPass" @blur="passwordInput" />
					<image class="lookPassword" src="https://z3.ax1x.com/2021/04/17/c4rd1O.png" mode=""
						style="width: 42rpx; height: 28rpx;"></image>
				</view>
				<view class="incorrect" v-show="passIncorrect">
					<image src="../../static/icon/cuo.png" mode=""
						style="width: 30rpx;height: 30rpx; margin-right: 10rpx;"></image>
					<text>两次输入密码不一致</text>
				</view>
				<view class="verifyBox">
					<view class="verifyInput">
						<image src="https://z3.ax1x.com/2021/04/17/c4NqVf.png" mode=""
							style="width: 30rpx; height: 36rpx; margin-right: 20rpx;"></image>
						<input type="text" v-model="userData.verificationCode" placeholder="请输入验证码" />
					</view>
					<button @tap="sendCode()" :class="codeBtn.waitingCode?'activeCode':'verifyMa'" :disabled="disabledBtn">
						<text>{{codeBtn.text}}</text>
					</button>
				</view>
				<view class="incorrect" v-show="testIncorrect">
					<image src="../../static/icon/cuo.png" mode=""
						style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"></image>
					<text>验证码不确</text>
				</view>
			</view>
			<view class="tmpBox">
				<view class="tmpText">
					<text>已有账号？</text>
				</view>
				<view class="registerBox" @tap="logins">
					<text>立即登录</text>
				</view>
			</view>
			<view class="check-item">
				<checkbox style="transform: scale(0.6);" :checked="ischeck"/>
				<text>我同意签署</text>
				<view class="checkText">
					<text>《用户协议》</text>
				</view>
				<text>和</text>
				<view class="checkText">
					<text>《隐私协议》</text>
				</view>
			</view>
			<button class="loginBtn" @tap="userRegister" :disabled="ischeck">
				<text>注册</text>
			</button>
		</view>
	</view>
</template>

<script>
	import apis from "@/api/apis.js";
	//手机号的正则判断
	let isTruePhone = /^1[3-9][0-9]{9}$/;
	export default {
		data() {
			return {
				//按钮禁用状态
				disabledBtn:true,
				//用户data
				userData: {
					username: '',
					password: '',
					verificationCode: ''
				},
				//确认密码
				confirmPass: '',
				//设置验证按钮所需数据
				seconds: 60,
				codeBtn: {
					text: '获取验证码',
					waitingCode: false,
					count: this.seconds
				},
				//设置输入框不正确的提示
				phoneIncorrect: false,
				passIncorrect: false,
				testIncorrect: false,
				ischeck:false
			}
		},
		methods: {
			logins(){
				uni.redirectTo({
					url:'../login/login'
				})
			},
			//正则判断
			userInput() {
				if (isTruePhone.test(this.userData.username)) {
					this.phoneIncorrect = false;
					this.disabledBtn=false;
				} else {
					this.phoneIncorrect = true;
					this.disabledBtn=true;
				}
			},
			passwordInput() {
				if (this.confirmPass == this.userData.password && this.userData.password.length > 0) {
					this.passIncorrect = false;
				} else {
					this.passIncorrect = true;
				}

			},
			
			//验证码按钮设置
			async sendCode() {
				this.codeBtn.count = this.seconds;
				this.text = this.codeBtn.count + 's';
				let codeTimer = setInterval(() => {
					this.codeBtn.waitingCode = true;
					this.codeBtn.text = this.codeBtn.count + 's';
					this.codeBtn.count--;
					this.disabledBtn=true;
					if (this.codeBtn.count <= 0) {
						clearInterval(codeTimer);
						this.codeBtn.text = '重新发送';
						this.codeBtn.waitingCode = false;
						this.phoneNum = '';
						this.disabledBtn=false;
					}
				}, 1000)
				let data = await apis.register.getMessage(this.userData.username);
			},
			//用户组册
			async userRegister() {
				let data = await apis.register.registerUser(this.userData);
				if(this.userData.username&&this.userData.password){
					if (data.code == 614) {
						console.log(data.code);
						uni.showModal({
							title: '提示',
							content: '账号已存在!',
							showCancel: false
						});
					} else if (data.code == 200&&this.ischeck) {
						uni.showToast({
							title: '注册成功！',
							duration: 2000
						},uni.redirectTo({
							url: '../login/login',
						}));
					}else if (data.code == 604) {
						this.testIncorrect=true
					}
				}else{
					uni.showModal({
						title: '提示',
						content: '填写信息不完整',
						showCancel: false,
					});
				}
				
			}
		}
	}
</script>

<style>
		.activeCode:disabled {
			background: #666666;
		}

	.header {
		height: 400rpx;
		background: url('https://z3.ax1x.com/2021/04/17/c4ijO0.png') no-repeat;
		background-size: cover;
		position: relative;
	}

	.loginHeader {
		width: 168rpx;
		position: absolute;
		top: 328rpx;
		right: 0;
		left: 0;
		bottom: 0;
		margin: auto;
	}

	.inputBox {
		width: 700rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 24rpx rgba(0, 0, 0, 0.1);
		border-radius: 12rpx;
		margin: 120rpx auto 0rpx auto;
		padding: 42rpx 30rpx;
		box-sizing: border-box;
	}

	.userBox {
		margin-top: 76rpx;
	}

	.userInput {
		margin-top: 30rpx;
		height: 60rpx;
		display: flex;
		border-bottom: 1px #D4D4D4 solid;
		position: relative;
	}

	.lookPassword {
		position: absolute;
		right: 20rpx;
	}

	.verifyBox {
		margin-top: 30rpx;
		height: 82rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.verifyInput {
		border-bottom: 1px #D4D4D4 solid;
		display: flex;
		height: 82rpx;
		align-items: center;
	}

	.check-item {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		color: #868686;
		margin-top: 18rpx;
	}

	.checkText {
		color: #1484F3;
	}

	.tmpBox {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
	}

	.tmpText {
		width: 350rpx;
		text-align: right;
		color: #868686;
		font-size: 28rpx;
	}

	.registerBox {
		width: 350rpx;
		color: #3476F1;
		font-size: 28rpx;
	}

	.loginBtn {
		width: 642rpx;
		height: 88rpx;
		border-radius: 52rpx;
		background: linear-gradient(180deg, #729EFA 0%, #3476FE 100%);
		margin-top: 30rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 88rpx;
		margin-bottom: 86rpx;
	}

	.wayBox {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.lineLeft {
		width: 79px;
		height: 1px;
		background: linear-gradient(270deg, #A6A6A6 0%, #FFFFFF 100%);
		opacity: 1;
	}

	.lineRight {
		width: 79px;
		height: 1px;
		background: linear-gradient(270deg, #FFFFFF 0%, #A6A6A6 100%);
		opacity: 1;
	}

	.wayText {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 40rpx;
		color: #A6A6A6;
		margin: 0 20rpx 0 20rpx;
	}

	.wayBtn {
		width: 410rpx;
		margin: 20rpx auto;
		display: flex;
		justify-content: center;
	}

	.wayBtn>image {
		margin: 0 15rpx;
	}

	.verifyMa {
		width: 280rpx;
		height: 82rpx;
		background: linear-gradient(180deg, #729EFA 0%, #3476FE 100%);
		line-height: 82rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 22rpx;
	}

	.incorrect {
		color: #DD524D;
		display: flex;
		align-items: center;
		font-size: 28rpx;
		margin-top: 18rpx;
	}

	.activeCode {
		width: 280rpx;
		height: 82rpx;
		background: rgba(102, 102, 102, 0.3);
		line-height: 82rpx;
		text-align: center;
		color: #FFFFFF;
		border-radius: 22rpx;
	}
</style>
